<template>
    <div class="community-container">
        <tab></tab>
        <div class="community-wrapper base-width">
            <div class="community-left-wrapper">
                <ul class="push-hotspot">
                    <li class="hotspot-wrapper" v-for="(item, index) in hotspotList" :key="index">
                        <img class="hotspot-img" :src="item.imgUrl" alt="">
                        <p class="hotspot-title">{{item.title}}</p>
                        <div class="base-info">
                            <img class="avatar" :src="item.avatar" alt="">
                            <span class="author">{{item.author}}</span>
                            <span class="reading">{{item.reading}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="community-right-wrapper">
                <div class="carousel-wrapper">
                    <el-carousel trigger="click" arrow="never" :interval="2000">
                        <el-carousel-item v-for="(item, index) in hotImgList" :key="index">
                            <img class="carousel-img" :src="item" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <hot-post></hot-post>
                <div class="your-interest-wrapper">
                    <h1 class="interest-title">你感兴趣</h1>
                    <div class="interest-content">暂无</div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import tab from '../../base/tab/tab'
    import Footer from '../../base/footer/Footer'
    import HotPost from '../../base/hot-post/HotPost'
    export default {
        data () {
            return {
               hotspotList: [
                   {
                       imgUrl: require('../../assets/images/1.jpg'),
                       title: 'Redis最佳实践与实战指南-源代码核心贡献者带你学习Redis关键技术',
                       avatar: 'https://ucc.alicdn.com/avatar/avatar3.jpg',
                       author: 'stromal',
                       reading: '2.9万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/2.jpg'),
                       title: '天元开源一周年，学习社区改版上线',
                       avatar: 'https://img1.baidu.com/it/u=3066221289,3475010804&fm=26&fmt=auto&gp=0.jpg',
                       author: 'AI进化 开源潜能',
                       reading: '2.85万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/3.jpg'),
                       title: ' Qualcomm 开发者专区 ',
                       avatar: 'https://img1.baidu.com/it/u=2669465948,2438487741&fm=26&fmt=auto&gp=0.jpg',
                       author: 'Qualcomm',
                       reading: '2.81万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/4.jpg'),
                       title: ' 用户登录功能的实现 ',
                       avatar: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771066238,2875232555&fm=26&gp=0.jpg',
                       author: '杀手不太冷！',
                       reading: '2.79万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/5.png'),
                       title: ' 第115天学习打卡（Linux环境搭建 走进Linux系统 常用的基本命令） ',
                       avatar: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=877206048,2833984394&fm=218&app=92&f=JPEG?w=121&h=75&s=F2AABD47D4A67AB4301C44F90300D032',
                       author: 'doudoutj！',
                       reading: '2.97万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/5.jpg'),
                       title: ' 【Python学习】Python最全总结',
                       avatar: 'https://img2.baidu.com/it/u=304192780,3962697358&fm=26&fmt=auto&gp=0.jpg',
                       author: 'WXiujie123456',
                       reading: '2.47万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/6.jpg'),
                       title: ' 数据挖掘中的12种距离度量原理及实现代码',
                       avatar: 'https://img1.baidu.com/it/u=2380359514,4169806513&fm=26&fmt=auto&gp=0.jpg',
                       author: 'datamonday',
                       reading: '2.15万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/7.jpg'),
                       title: ' 搭建第一个Dapp应用（7）——完善SpringBoot项目业务层逻辑(DAPP开发）——2021.5.4',
                       avatar: 'https://img0.baidu.com/it/u=1690101440,4018861958&fm=26&fmt=auto&gp=0.jpg',
                       author: 'Blockchain_Key',
                       reading: '2.42万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/8.png'),
                       title: ' 聪明钱因子（R语言实现）',
                       avatar: 'https://img2.baidu.com/it/u=2206316897,2402636650&fm=26&fmt=auto&gp=0.jpg',
                       author: 'Hillan_',
                       reading: '2.51万浏览'
                   },
                   {
                       imgUrl: require('../../assets/images/9.jpg'),
                       title: ' FPGA应用篇【1】比特币SHA256算法实现——核心RTL）',
                       avatar: 'https://img2.baidu.com/it/u=450461540,1107756690&fm=26&fmt=auto&gp=0.jpg',
                       author: '法外狂徒',
                       reading: '2.91万浏览'
                   },
               ],
                hotImgList: [
                    require('../../assets/images/10.jpg'),
                    require('../../assets/images/11.png'),
                    require('../../assets/images/12.png'),
                ]
            }
        },
        components: {
            tab,
            HotPost,
            Footer
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
   .community-container {
       /deep/.tab-wrapper {
           position: relative;
           background: $bg-tab;
           opacity: 0.83;
       }
       .community-wrapper {
           display: grid;
           grid-template-columns: 1050fr 371fr;
           margin: 20px auto;
           .community-left-wrapper {
               max-width: 1050px;
               margin: 0 25px;
               .push-hotspot {
                   display: grid;
                   grid-template-columns: repeat(3, 316px);
                   grid-template-rows: 273px;
                   grid-auto-rows: 273px;
                   grid-column-gap: 26px;
                   grid-row-gap: 36px;
                   .hotspot-wrapper {
                       display: flex;
                       flex-direction: column;
                       padding-bottom: 25px;
                       box-sizing: border-box;
                       cursor: pointer;
                       .hotspot-img {
                           width: 316px;
                           height: 176px;
                           object-fit: cover;
                           transform: scale(1);
                           transition: all 500ms;
                           &:hover {
                               box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);
                               transform: scale(1.1);
                           }
                       }
                       .hotspot-title {
                           @include no-wrap;
                           margin: 9px 14px;
                           line-height: 26px;
                           color: $font-gray;
                           font-size: 14px;
                       }
                       .base-info {
                           display: flex;
                           align-items: center;
                           padding: 0 14px;
                           line-height: 26px;
                           color: rgb(82, 143, 255);
                           font-size: 14px;
                           box-sizing: border-box;
                           .avatar {
                               width: 26px;
                               height: 26px;
                               margin-right: 8px;
                               object-fit: cover;
                               border-radius: 18px;
                           }
                           .reading {
                               margin-left: auto;
                               color: rgb(102, 105, 112);
                           }
                       }
                   }
               }
           }
           .community-right-wrapper {
               max-width: 371px;
               .carousel-wrapper {
                   width: 100%;
                   margin-bottom: 24px;
                   /deep/.el-carousel__button {
                       width: 10px;
                       height: 10px;
                       border-radius: 50%;
                       background-color: #DDDDDD;
                   }
                   /deep/.el-carousel__container {
                       height: 470px !important;
                   }
                   /deep/.el-carousel__indicator.is-active button {
                       background-color: #333333;
                   }
                   .carousel-img {
                       width: 100%;
                       height: 100%;
                       object-fit: cover;
                       cursor: pointer;
                       transition: all 500ms;
                       &:hover {
                           box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);
                           transform: scale(1.1);
                       }
                   }
               }
               .your-interest-wrapper {
                   padding: 13px 28px;
                   color: $font-gray;
                   font-weight: 700;
                   font-size: 20px;
                   border: 1px solid $border-color;
                   border-radius: 20px;
                   .interest-title {
                       font-size: 20px;
                       margin-left: 5px;
                   }
                   .interest-content {
                       display: flex;
                       align-items: center;
                       justify-content: center;
                       font-weight: 400;
                       width: 100%;
                       height: 200px;
                   }
               }
           }
       }
   }
</style>
